<template>
    <el-container style="background-color: white" :model="page" v-if="page.id">
        <el-header style="text-align: right; border-bottom: 2px solid #f5f5f5;">
            <el-button @click="backEvt" size="small">返回</el-button>
        </el-header>
        <el-main>
            <el-form :model="page"
                ref="ruleForm"
                size="small"
                label-width="80px">
                <!-- prop属性是给rules使用的，表示使用rules中的name属性进行数据校验 -->
                <el-row>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                        <el-form-item label="礼品名字" prop="name">
                            <el-input readonly v-model="page.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                        <el-form-item label="成本价" prop="pure_price">
                            <el-input readonly v-model="page.pure_price" type='number'></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                        <el-form-item label="定价" prop="price">
                            <el-input readonly v-model="page.price" type='number'></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                        <el-form-item label="优惠" prop="discount">
                            <el-input readonly v-model="page.discount" type='number'></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                        <el-form-item label="限购" prop="limit">
                            <el-input readonly v-model="page.limit" type='number'></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                        <el-form-item label="上架时间" prop="sale_stime">
                            <el-input readonly v-model="page.sale_stime">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                        <el-form-item label="下架时间" prop="sale_etime">
                            <el-input readonly v-model="page.sale_etime">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                        <el-form-item label="类型" prop="type">
                            <el-input readonly v-model="page.type"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                        <el-form-item label="单位" prop="unit">
                            <el-input readonly v-model="page.unit"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                        <el-form-item label="品级" prop="level">
                            <el-input readonly v-model="page.level"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                        <el-form-item label="产地" prop="place">
                            <el-input readonly v-model="page.place"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                        <el-form-item label="品牌" prop="brand">
                            <el-input readonly v-model="page.brand"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="详情" prop="detail">
                            <div class="Detail" v-if="page.detail" >
                                <img v-for="(_,i) in detailArr" :key="i" class="my-detail" :src="`http://www.shuiyue.info:21000${detailArr[i]}`"/>
                            </div>
                            <div class="Detail" v-else style="color:red" >
                                用户没有上传详情图
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="banner" prop="banner">
                            <div class="Banner" v-if="page.banner" >
                                <img v-for="(_,i) in detailArr" :key="i" class="my-banner" :src="`http://www.shuiyue.info:21000${detailArr[i]}`"/>
                            </div>
                            <div class="Banner" v-else style="color:red" >
                                用户没有上传详情图
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="备注" prop="remark">
                            <el-input readonly v-model="page.remark"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-main>
    </el-container>
    <div v-else>您未选择礼品，无法为您展示详情</div>
</template>

<script>
import { giftListApi } from '@/apis/giftApi'

export default {
    data() {
        return {
            giftList:{},
            page: {
                "list": [],
                "name": "",
                "product_name": "",
                "pure_price": 0,
                "price": 0,
                "discount": 0,
                "count": 0,
                "limit": 0,
                "sale_stime": "",
                "sale_etime": "",
                "type": "",
                "unit": "",
                "level": "",
                "place": "",
                "brand": "",
                "detail": '',
                "banner": [],
                "remark": ""
            },
            bannerArr:[],
            detailArr:[],
            query:{
                page:1,
                size:100,
                name:''
            }
        }
    },
    async mounted(){
      let res = await giftListApi(this.query)
        if(localStorage.getItem('giftFlag')==='true')
        {
            this.page=this.$store.getters['common/giftList']
        }
        localStorage.removeItem('giftFlag')
        // console.log(this.getList)
        this.detailArr=this.page.detail.split('--')
        this.detailArr=this.page.banner.split('--')
    },
    methods: {
        backEvt() {
            this.$router.go(-1)
        }
    }
}
</script>

<style lang="less" scoped>
    .el-header {
        line-height: 60px;
    }
    .Detail,
    .Banner{
        width: 500px;
        display: flex;
        flex-wrap: wrap;
        justify-content:flex-start;
        align-items: center;
        .my-detail,
        .my-banner{
            width: 200px;
            height: 200px;
            background-size: 100% 100%;
            margin: 10px 10px;
        }
    }
</style>